<!-- 
  @name: 日期筛选
  @date: 2020.3.31
 -->
<template>
	<view class="date-select" v-show="showPopup">
		<view class="_popup" :style="{top: mtop + 'rpx'}" @tap="close"></view>
		<view class="__view" :style="{top: mtop + 'rpx'}">
			<!-- 选择按钮 -->
			<view class="__chk">
				<view
					class="__btn"
					v-for="(item, index) in typeList"
					:key="index"
					:class="dateType === index ? 'sl' : ''"
					@tap="changeType(item, index)">
					{{item}}
				</view>
			</view>
			<!-- 条件展示 -->
			<view class="__term-date" v-if="dateType === 0">
				<text class="__term-1 t1">{{syear}}-{{smonth}}</text>
			</view>
			<view class="__term-date" v-if="dateType === 1">
				<text class="__term-1" :class="startSel ? 't1' : ''" @tap="startTime">
					{{syear}}-{{smonth}}-{{sday}}
				</text>
				<text class="__term-2">至</text>
				<text class="__term-1" :class="endSel ? 't1' : ''" @tap="endTime">
					{{eyear}}-{{emonth}}-{{eday}}
				</text>
			</view>
			<!-- 条件选择 -->
			<view class="__pup">
				<picker-view
					class="__picker"
					v-if="pickerVisible"
					:value="pickerValue"
					:indicator-style="indicatorStyle"
					@change="pickerChange">
				    <picker-view-column>
				        <view class="__item" v-for="(item,index) in yearList" :key="index">{{item}}年</view>
				    </picker-view-column>
				    <picker-view-column>
				        <view class="__item" v-for="(item,index) in monthList" :key="index">{{item}}月</view>
				    </picker-view-column>
				    <picker-view-column v-show="dateType === 1">
				        <view class="__item" v-for="(item,index) in dayList" :key="index">{{item}}日</view>
				    </picker-view-column>
				</picker-view>
			</view>
			<!-- 完成操作 -->
			<view class="__handle">
				<view class="__btn" @tap="reset">重置</view>
				<view class="__btn.b2" @tap="putSubmit">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top: {
				type: [Number, String],
				default: 110  //距离顶部的位置
			},
			show: {
				type: Boolean,
				default: false  //是否显示日期筛选图层
			},
			start: {
				type: String,
				default: '2000-1-1'  //开始日期
			},
			end: {
				type: String,
				default: '2020-1-31'  //结束日期
			},
			type: {
				type: [Number, String],
				default: 0  //筛选方式，0-按月筛选，1-按日筛选
			}
		},
		data() {
			return {
				mtop: this.top,
				showPopup: this.show,
				
				pickerVisible: true,  //picker-view是否显示(重新渲染)
				pickerValue: [],  //picker-view默认日期
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/80))}px;`,  //picker-view中间行样式
				yearList: [],  //picker-view年份
				monthList: [],  //picker-view月份
				dayList: [],  //picker-view天数
				
				typeList: ['按月选择', '按日选择'],  //筛选类型
				dateType: this.type,
				
				startSel: true,  //是否进行开始日期操作
				endSel: false,  //是否进行结束日期操作
				
				syear: 2000,  //开始年份
				smonth: 1,  //开始月份
				sday: 1,  //开始天数
				
				eyear: 2020,  //结束年份
				emonth: 1,  //结束月份
				eday: 1,  //结束天数
			}
		},
		watch: {
			show(newVal, oldVal) {
				this.showPopup = newVal;
				if(newVal){ this.startTime() }
			},
			start(newVal, oldVal) {
				let arr = newVal.split('-');
				this.syear = parseInt(arr[0]);
				this.smonth = parseInt(arr[1]);
				this.sday = parseInt(arr[2]);
			},
			end(newVal, oldVal) {
				let arr = newVal.split('-');
				this.eyear = parseInt(arr[0]);
				this.emonth = parseInt(arr[1]);
				this.eday = parseInt(arr[2]);
			},
			type(newVal, oldVal) {
				this.dateType = newVal;
			},
			top(newVal) {
				this.mtop = this.top;
			}
		},
		created() {
			this.setPicker();
		},
		methods: {
			//关闭弹窗
			close() {
				this.startSel = false;
				this.endSel = false;
				this.pickerVisible = false;
				this.showPopup = !this.showPopup;
				this.$emit('cancle', this.showPopup);
			},
			//点击确定按钮
			putSubmit() {
				let num1 = parseInt(this.syear) % 4;
				let num2 = parseInt(this.eyear) % 4;
				if(this.dateType === 0) {
					//按月筛选
					this.sday = 1;
					this.eyear = this.syear;
					this.emonth = this.smonth;
					this.eday = this.calcDay(this.eyear, this.emonth);
				} else {
					//按日筛选
					// if(this.sday >= 29) {
					// 	this.sday = this.calcDay(this.syear, this.smonth);
					// }
					// if(this.eday >= 29) {
					// 	this.eday = this.calcDay(this.eyear, this.emonth);
					// }
				}
				this.startSel = false;
				this.endSel = false;
				this.showPopup = false;
				this.pickerVisible = false;
				let startTime = this.syear + '-' + this.addZero(this.smonth) + '-' + this.addZero(this.sday);
				let endTime = this.eyear + '-' + this.addZero(this.emonth) + '-' + this.addZero(this.eday);
				let startTime2 = startTime;
				let endTime2 = endTime;
				let sdate = new Date(startTime.replace(/-/g, '/'));
				let stime = Date.parse(sdate);
				let edate = new Date(endTime.replace(/-/g, '/'));
				let etime = Date.parse(edate);
				if(etime < stime) {
					startTime = endTime2;
					endTime = startTime2;
				}
				this.$emit('submit', startTime, endTime, this.dateType);
				console.log('submit', startTime, endTime, this.dateType);
			},
			//重置筛选条件
			reset() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if(this.datetype === 0) {
					this.syear = year;
					this.smonth = month;
				} else {
					this.syear = year;
					this.eyear = year;
					this.smonth = month;
					this.emonth = month;
					this.sday = day;
					this.eday = day;
					this.startTime();
				}
				//初始化picker-view
				this.pickerValue = [year - 1, month - 1, day - 1];
				this.pickerVisible = false;
				this.$nextTick(() => { this.pickerVisible = true });
			},
			//通过比较年份月份来确定最终日期，防止闰平月等问题
			calcDay(year, month) {
				let day = 31;
				if(month == 4 || month == 6 || month == 9 || month == 11) {
					day = 30;
				} else if (month == 2) {
					let num = parseInt(year) % 4;
					day = num === 0 ? 29 : 28;
				}
				return day;
			},
			//不足10的添加0
			addZero(num) {
				let str = num < 10 ? ('0' + num) : num;
				return str;
			},
			//更改筛选方式
			changeType(item, index) {
				this.dateType = index;
				if(index === 1) {
					this.startTime();
				}
			},
			//点击开始筛选
			startTime() {
				this.endSel = false;
				this.startSel = true;
				this.pickerVisible = false;
				this.pickerValue = [this.syear - 1, this.smonth - 1, this.sday - 1];
				this.$nextTick(() => { this.pickerVisible = true });
			},
			//点击结束筛选
			endTime() {
				this.startSel = false;
				this.endSel = true;
				this.pickerVisible = false;
				this.pickerValue = [this.eyear - 1, this.emonth - 1, this.eday - 1];
				this.$nextTick(() => { this.pickerVisible = true });
			},
			//改变picker的值
			pickerChange(e) {

			    let val = e.detail.value;
				let year = this.yearList[val[0]];
				let month = this.monthList[val[1]].toString();
				/*
				*  处理不同月数的天数问题
				*/
				var days = new Date(year,month,0).getDate();
				this.dayList = [...this.DAYS]
				this.dayList.length = days;
				let day = (this.dayList[val[2]] || 1).toString();

				if(this.dateType === 0) {
					this.syear = year;
					this.smonth = month;
				} else {
					// 按日选择
					if(this.startSel) {
						// 选择开始时间
						this.syear = year;
						this.smonth = month;
						this.sday = day;
					} else if (this.endSel) {
						// 选择结束时间
						this.eyear = year;
						this.emonth = month;
						this.eday = day;
					}
				}
			},
			//初始化picker
			setPicker() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				for (let i = 1990; i <= year; i++) {
					this.yearList.push(i);
				}
				for (let i = 1; i <= 12; i++) {
					this.monthList.push(i);
				}
				for (let i = 1; i <= 31; i++) {
					this.dayList.push(i);
				}
				this.DAYS = this.dayList;
				//初始化picker-view
				this.pickerValue = [year - 1, month - 1, day - 1];
				this.pickerVisible = false;
				//v-if在切换时，元素及它的绑定数据和组件都会被销毁并重建
				this.$nextTick(() => { this.pickerVisible = true });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-select {
		.__view {
			position: fixed;
			z-index: $z-index-popup-info;
			width: 750rpx;
			background-color: $color-white;
		}
		.__chk {
			width: 100%;
			padding: 50rpx 28rpx;
			display: flex;
			flex-direction: row;
			.__btn {
				width: 196rpx;
				height: 67rpx;
				line-height: 66rpx;
				text-align: center;
				margin-right: 57rpx;
				font-size: 30rpx;
				color: $color-grey;
				background-color: $color-bg;
				border-radius: $border-radius-bm;
			}
			.__btn.sl {
				color: $color-primary;
				background-color: $color-bg-primary;
			}
		}
		.__term-date {
			width: 100%;
			padding-bottom: 48rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.__term-1 {
				flex: 1;
				text-align: center;
			}
			.__term-1.t1 {
				font-size: 36rpx;
				color: $color-primary;
			}
			.__term-2 {
				color: #727272;
			}
		}
		.__pup {
			width: 100%;
			height: 310rpx;
			padding: 30rpx 0;
			.__picker {
			    width: 100%;
			    height: 250rpx;
				
				.__item {
				    line-height: 100rpx;
				    text-align: center;
				}
			}
		}
		.__handle {
			display: flex;
			flex-direction: row;
			border-top: 1rpx solid $color-list;
			.__btn {
				flex: 1;
				height: 122rpx;
				line-height: 122rpx;
				text-align: center;
				font-size: 30rpx;
			}
			.__btn.b2 {
				background-color: $color-primary;
				.__num {
					height: 30rpx;
					line-height: 29rpx;
					margin-left: 9rpx;
					padding: 1rpx 10rpx;
					font-size: 24rpx;
					color: $color-white;
					font-family: $font-family-num;
					background-color: $color-text;
					border-radius: $border-radius-bm;
				}
			}
		}
	}
</style>